<script>
import { cloneDeep, forEach } from "lodash-es";
import draggable from "@/components/vuedraggable/vuedraggable";
import nestedDraggable from "./nested";
export default {
  props: {
    schema: {
      type: Object,
      default: null,
    },
  },
  components: {
    nestedDraggable,
  },
  render() {
    const schema = Object.freeze(cloneDeep(this.schema));
    let Comp = null;

    const Element = this.schema.tag;

    Comp = (
      <Element schema={this.schema}>
        {this.schema.children.map((item) => (
          <nestedDraggable schema={item} />
        ))}
      </Element>
    );

    Comp = (
      <el-col props={{ ...this.schema.props }} style={this.schema.style}>
        {Comp}
      </el-col>
    );

    return (
      // <draggable tag="div" list={schema.children} group={{ name: "people" }}>
      Comp
      // </draggable>
    );
  },
};
</script>

<style lang="scss" scoped>
.drag-box {
  min-height: 60px;
}

.draggable-drag {
  height: 100%;
}
</style>
